<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.设置超时时限 -->
    <script>
        xhr.timeout = 3000
        xhr.ontimeout = function(){
            console.log('请求超时')
        }
    </script>
    <!-- 2.formData对象 -->
    <script>
        // 1.创建fromData实例
        var fd = new FormData()
        // 2.调用append函数追加数据
        fd.append('uname','zs')
        fd.append('upwd','123456')

        var xhr = new XMLHttpRequest()
        xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
        xhr.send(fd)
        xhr.onreadystatechange = function(){
            if(xhr.readyState===4 && xhr.status===200)
            {
                console.log(JSON.parse(xhr.responseText))   
            }
        }
    </script>
    <!-- 3.上传文件 -->
    <!-- 3.1使用xhr发起上传文件请求 -->
    <input type="file" id="file1">
    <button id="btn">上传文件</button>
    <!-- bootstrap中的进度条 -->
    <div class="progess" style="width: 500px;margin: 15ps 10px;">
        <div class="progess-bar progess-bar-striped active" style="width: 0%;" id="percent">
            0%
        </div>
    </div>
    <script>
        var btn = document.querySelector('#btn')
        btn.addEventListener('click',function(){
            var files = document.querySelector('#file1').files
            if(files.length <= 0){
                return alert('请选择想要上传的文件')
            }
            var fd = new FormData()
            fd.append('avater',files[0])
            var xhr = new XMLHttpRequest()

            //显示文件上传进度
            xhr.upload.onprogress = function(e){
                if(e.lengthComputable){
                    //计算出上传速度
                    var procentComplete = Math.cell((e.loaded/e.total)*100)
                    console.log(procentComplete)
                    //动态设置进度条
                    $('#perent').attr('style','width:'+procentComplete+'%').html(procentComplete+'%')
                }
            }
            xhr.upload.onabort= function(){
                $('#perent').removeClass().addClass
                ('progess-bar progess-bar-success')
            }

            xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
            xhr.send(fd)
            xhr.onreadystatechange = function(){
            if(xhr.readyState===4 && xhr.status===200)
            {
                var data = JSON.parse(xhr.responseText)
                if(data.status===200){
                    //上传成功
                }else {
                    //上传失败
                }
            }
            
        }
        })
    </script>
     
    <!-- 3.2使用jQuery实现文件上传 -->
    <input type="file" id="file2">
    <button id="btn1">上传文件</button>
    <br>
    <img src="" alt="" style="display: none;" id="loading">

    <script>
        $(function(){
            //监听到Ajax请求被发起了
            $(document).ajaxStart(function(){
                $('#loading').show
            })

            //监听到Ajax完成事件
            $(document).ajaxStop(function(){
                $('#loading').hide()
            })
            
            $('#btnUpload').on('click',function(){
                var files = $('#file2')[0].files
                if(files.length<=0){
                    return alert('请选择文件再上传')
                }
                var fd = new FormData()
                fd.append('avatar',files[0])
                //发起jQuery的Ajax请求
                $.ajax({
                    method:'POST',
                    url:'http://www.liulongbin.top:3006/api/addbook',
                    data:fd,
                    processData:false,
                    contentType:false,
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>


</body>
</html>